<!DOCTYPE html>
<html>
    <head>
        <title>template</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="./vendor/avalon/avalon.modern.min.js" ></script>
        <style>
            .bp{
                border: 1px solid green;
            }
            .contain{
                border: 1px solid red;
            }
        </style>
        <script type="text/javascript">
            var a = avalon.define({
                $id: "test",
                num: "5.html",
                change: function() {
                    a.num = a.num === "5.html" ? "6.html" : "5.html"
                }
            })
        </script>
    </head>
    <body>
        <!-- 在avalon1.3.7中添加一个辅助指令data-duplex-replace，当其值为真，它就会加载模板后自动替代掉其原父容器节点。  -->
        <div ms-controller="test">
            <button type="button" ms-click="change">change</button>
            <div ms-include-src="'includeTemplate'+num" class="contain"></div>
            <div ms-include-src="'includeTemplate'+num" class="contain" data-include-replace="true"></div>
        </div>
    </body>
</html>
